<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '订单详情',
  },
}
</route>

<template>
  <view class="order-detail" v-if="!!state.records && state.records.length > 0">
    <!-- 二维码 -->
    <view>
      <QRCode :orderCode="state.records[0].orderCode"></QRCode>
    </view>
    <!-- 订单状态 -->
    <view class="order-status">
      <text>{{ state.records[0].orderStatus }}</text>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view v-for="(item, index) in state.records[0].details" :key="index" class="goods-item">
        <!-- <view class="goods-image"></view> -->
        <img :src="item.mainPic" class="goods-image" />
        <view class="goods-info">
          <view class="goods-name">{{ item.productName }}</view>
          <view class="goods-price">
            <text class="price">¥{{ item.productPrice }}</text>
            <text class="count">×{{ item.orderQuantity }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="total-price">
        <text>商品总价：</text>
        <text class="price">¥{{ state.records[0].totalAmount }}</text>
      </view>
      <view class="order-number">
        <text>订单编号：</text>
        <text>{{ state.records[0].orderCode }}</text>
      </view>
      <view class="create-time">
        <text>创建时间：</text>
        <text>{{ state.records[0].createTime }}</text>
      </view>
      <view class="pay-time">
        <text>付款时间：</text>
        <text>{{ state.records[0].paymentTime || '--' }}</text>
      </view>
      <view class="remark">
        <text>订单备注：</text>
        <text>{{ state.records[0].orderNotes || '--' }}</text>
      </view>

      <view class="remark">
        <text>功能：</text>
        <text
          style="color: #007aff; text-decoration: underline; cursor: pointer"
          @click="handleCopy"
        >
          复制
        </text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { getOrderListByPage, getOrderDetail } from '@/service/order'
import { useProfileStore } from '@/store'
import { useShopcartStore } from '@/store/shopcart'
import QRCode from '@/components/QRCode/index.vue'
const profileStore = useProfileStore()
const shopcartStore = useShopcartStore()

const { profileInfo, chargeStore } = storeToRefs(profileStore)
const { shopcartTotal } = storeToRefs(shopcartStore)

const to = () => {
  uni.navigateTo({
    url: '/pages/qrcode/qrcode',
  })
}

const initOrderDetail = (orderCode: string) => {
  getOrderDetail({
    orderCode,
    upcCode: '',
  }).then((res) => {
    console.log(res)
    if (res.code === 200) {
      // orderInfo.value = res.result
    }
  })
}
const state = ref([])
const initOrderList = (orderCode: any) => {
  getOrderListByPage({
    listType: '全部',
    pageNo: 1,
    pageSize: 10,
    storeCode: chargeStore.value.storeCode,
    orderCode,
  }).then((res) => {
    if (res.code === 200) {
      state.value = res.result
    }
  })
}
onMounted(() => {})

const handleCopy = () => {
  console.log(state.value.records[0])
  uni.setClipboardData({
    data: `订单号：${state.value.records[0].orderCode} \n 
    订单金额：${state.value.records[0].totalAmount} \n 
    订单状态：${state.value.records[0].orderStatus} \n 
    订单备注：${state.value.records[0].orderNotes}`,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
      })
    },
  })
}

onLoad((options) => {
  const pages = getCurrentPages()
  console.log(pages)
  const orderCode = options.orderCode
  initOrderList(orderCode)
})
</script>

<style lang="scss">
.order-detail {
  min-height: 100vh;
  padding: 0px 20rpx 120rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .address-info {
    padding: 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;

    .user-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .name {
        font-size: 28rpx;
        font-weight: 500;
      }

      .phone {
        font-size: 28rpx;
        color: #666;
      }
    }

    .address {
      font-size: 26rpx;
      line-height: 1.4;
      color: #666;
    }
  }

  .order-status {
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #ff6b00;
    background-color: #fff;
  }

  .goods-list {
    max-height: 400px;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    overflow: scroll;
    background-color: #fff;
    .goods-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .goods-image {
        width: 160rpx;
        height: 160rpx;
        margin-right: 20rpx;
        border-radius: 8rpx;
      }

      .goods-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;

        .goods-name {
          margin-bottom: 10rpx;
          font-size: 26rpx;
          line-height: 1.4;
        }

        .goods-price {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .price {
            font-size: 28rpx;
            color: #ff6b00;
          }

          .count {
            font-size: 26rpx;
            color: #999;
          }
        }
      }
    }
  }

  .order-info {
    padding: 30rpx;
    background-color: #fff;

    view {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15rpx;
      font-size: 26rpx;
      color: #666;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .total-price {
      // .price {
      //   font-size: 28rpx;
      //   color: #ff6b00;
      // }
    }
  }
}
</style>
